<@home.head>
	<@home.common_add/>
	<script type="text/javascript" src="${basePath}/widget/dtree/js/jquery.ztree.core-3.1.js"></script>
	<link rel="stylesheet" href="${basePath}/widget/dtree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script>
		 var setting = {
			view: {
				dblClickExpand: false,
				selectedMulti:false,
				autoCancelSelected: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: onClick
			}
		};
		
		var zNodes =[
			{id:'0', pId:'-1', name:'根菜单ROOT',open:true},
			<#list menuList as menu>
				<#if menu_has_next>
					{id:'${menu.menuCode}', pId:'${menu.parentCode}', name:'${menu.menuName}',open:true},
				<#else>
					{id:'${menu.menuCode}', pId:'${menu.parentCode}', name:'${menu.menuName}',open:true}
				</#if>
			</#list>
		 ];
		 
	   function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("parentMenu"),
			nodes = zTree.getSelectedNodes(),
			v = "";
			var paremtMenuCode="";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
				paremtMenuCode+=nodes[i].id;
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var parentCode2 = $("#parentCode2");
			parentCode2.attr("value", v);
			$("#parentCode").val(paremtMenuCode);
		}
		 
		function showMenu() {
			var parentCode2 = $("#parentCode2");
			var parentCode2set = $("#parentCode2").offset();
			$("#menuContent").css({left:parentCode2set.left + "px", top:parentCode2set.top + parentCode2.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		 
		$(document).ready(function(){
			$.fn.zTree.init($("#parentMenu"), setting, zNodes);
		}); 
	</script>
</@home.head>
<@home.body>
		<div>
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td class="main_05_02_01">
						系统管理&nbsp;&gt;&gt;&nbsp;菜单&nbsp;&gt;&gt;&nbsp;菜单新增
					</td>
					<td class="main_05_02_02">
						&nbsp;
					</td>
				</tr>
			</table>
			<@s.form commandName="sysMenu" id="inputForm" class="addTable" action="menu_edit.shtml">
				<table border="0" cellspacing="0" cellpadding="0" width="100%">
					<tr>
						<td style="text-align: center;padding:10px 10px;font-size:16px;font-weight: bold">
							菜单编辑
						</td>
					</tr>
				</table>
				<table width="500px" class="addTable" cellpadding="0" cellspacing="0" style="margin: 0 auto">
					<tr>
						<td class="td_1_l">上级菜单：</td>
						<td class="td_1_r">
							<@s.hidden path="parentCode" id="parentCode"/>
							<input type="hidden" name="oldParentCode" id="oldParentCode" value="${sysMenu.parentCode}"/>
							<input id="parentCode2" name="parentCode2" value="${parentMenu.menuName}" type="text" readonly value=""  onclick="showMenu(); return false;" style="width:120px;"/>
						</td>	
					</tr>
					<tr>
						<td class="td_1_l">是否叶子菜单：</td>
						<td class="td_1_r"><@s.radiobutton path="isLeaf" value="Y"/>叶子<@s.radiobutton path="isLeaf" value="N" disable="true"/>不是叶子</td>	
					</tr>
					<tr>
						<td class="td_1_l">菜单名称：</td>
						<td class="td_1_r"><@s.input id="sysMenu_menuName"  size="30"  cssClass="{required:true,rangelength:[2,10],messages:{required:'请输入菜单名称'}}" path="menuName"/></td>	
					</tr>
					<tr>
						<td class="td_1_l">菜单对应的链接：</td>
						<td class="td_1_r"><@s.input id="sysMenu_linkUrl" path="linkUrl" style="width:300px" /></td>	
					</tr>
					<tr>
						<td class="td_1_l">菜单编码：</td>
						<td class="td_1_r"><@s.input id="sysMenu_menuCode"  size="30" disabled="disabled"  cssClass="{required:true,rangelength:[4,50],messages:{required:'请输入菜单编码'}}" path="menuCode" /></td>	
					</tr>
					<tr>
						<td class="td_1_l">状态：</td>
						<td class="td_1_r"><@s.radiobutton path="dataState" value="1"/>可用<@s.radiobutton path="dataState" value="0"/>停用</td>	
					</tr>
					<tr>
						<td class="td_1_l">菜单图片URL：</td>
						<td class="td_1_r"><@s.input id="sysMenu_imageFlag" path="imageFlag" size="40" cssClass="validate[maxSize[128]] text-input"/></td>	
					</tr>
					<tr>
						<td class="td_1_l">排序序号：</td>
						<td class="td_1_r"><@s.input cssClass="{required:true,digits:true,range:[0,1000]}" size="2" path="taxis" id="sysMenu_taxis" /></td>
					</tr>
					<tr>
						<td class="td_1_l">菜单图片URL：</td>
						<td class="td_1_r"><@s.input id="sysMenu_description" path="description" size="40" cssClass="validate[maxSize[200]] text-input" style="width:300px;height:80px;"/></td>	
					</tr>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" width="100%">
					<tr>
						<td style="text-align:center;padding:10px 10px;">
							<button  type="button"  onclick="parent.$.jBox.close('id-jbox-dialog')">
								<span class="icon_exit">关闭</span>
							</button>
							&nbsp;
							<button type="button" onclick="submitForm()">
								<span class="icon_save">保存</span>
							</button>&nbsp;&nbsp;
						</td>
					</tr>
				</table>
			</@s.form>
		</div>
		<div id="menuContent" class="menuContent" style="display:none; position: absolute;height:250px;width:250px;">
			<ul id="parentMenu" class="ztree" style="margin-top:0; width:250px;height:250px;background-color:#EBEEF7;"></ul>
		</div>
</@home.body>
